<template>
    <div>
      <div v-if="blist.length == 0" class="nocard" @click="addCardp()">
        <img src="./imgs/addCard.png"/>
        <h3>添加银行卡</h3>
        <p>
          温馨提示：您还没有绑定银行卡，请尽快完成银行卡绑定
          否则将影响车辆租金收取
        </p>
      </div>
      <div v-else>
        <div  class="hascard" v-for="b,index in blist">
          <!--<div class="cardLogo">-->
            <!--<div class="cardLogoImg">-->
              <!--<img src="./imgs/item4.icon.png"/>-->
            <!--</div>-->
          <!--</div>-->
          <div class="cardDesc">
            <h3>{{b.openBank}}</h3>
            <p>储蓄卡</p>
            <div class="pnumber">尾号{{b.bankAccount.substring(b.bankAccount.length-4)}}</div>
          </div>
        </div>
      </div>

    </div>
</template>

<script>
  export default {
    name: "bank-card",
    data(){
      return{
        blist:[]
      }
    },
    created(){
      this.getmyCard()
    },
    methods:{
      addCardp(){
        this.$router.push({
          path:'/center',
          query:{
            funCode:'addBankCard'
          }
        })
      },
      getmyCard(){
        this.$http.get('yxc/wxuser/bank/queryBankList').then(res=>{
            if(res.code == 200 && res.data){
              this.blist = res.data
              // alert(this.blist)
           }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>

  .nocard{
    margin:15px;
    text-align: center;
    background: #FFF;
    border-radius: 5px;
    box-sizing: border-box;
    height:150px;
    padding:20px 20px 0 20px;
    img{width:45px;}
    h3,p{
      margin:0;
      padding:0;
    }
    h3{
      color:#333;
      font-size: 16px;
    }
    p{
      padding-top:5px;
      font-size:12px;
      color:#999;
    }
  }
  .hascard{
    height:120px;
    box-sizing: border-box;
    padding:20px;
    background:linear-gradient(90deg,rgba(0,198,255,1),rgba(0,114,255,1));
    box-shadow:0px 4px 21px 1px rgba(0,136,255,0.4);
    border-radius:5px;
    margin:15px;
    display: flex;
    .cardLogo{
      .cardLogoImg{
        padding:5px;
        width:50px;height:50px;
        box-sizing: border-box;
        padding:5px;
        overflow: hidden;
        background: #FFF;
        img{width:100%;}
        border-radius: 1000px;
      }
    }
    .cardDesc{
      padding-left:10px;
      h3,p{
        margin:0;padding:0;
      }
      h3{
        font-size:16px;
      }
      p{font-size:12px;}
      color:#FFF;
      .pnumber{
        padding-top: 20px;font-size:16px;
      }
    }
  }
</style>
